<template>
    <div class="platformContainer">
        <el-card shadow="always" class="header_card">
            <el-form :inline="true" :model="formInline" label-width="1.125rem">
                <el-form-item label="登录地址">
                    <el-input v-model="formInline.user" placeholder="请输入登录地址"></el-input>
                </el-form-item>
                <el-form-item label="登录状态">
                    <el-select v-model="formInline.region" placeholder="请输入登录状态">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="登录时间">
                    <div class="block">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="12"><el-button type="primary" @click="onSubmit">搜索</el-button></el-col>
                        <el-col :span="12"><el-button @click="onSubmit">重置</el-button></el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="content">
            <el-descriptions title="登录日志" :colon="false">
                <template slot="extra">
                    <el-button icon="el-icon-refresh" type="text" class="refresh" size="mini"></el-button>
                </template>
            </el-descriptions>
            <div class="table" style="width: 99%;">
                <el-table :data="tableData" :header-cell-style="headerRowStyle2" class="tag6_table" height="7rem">
                    <el-table-column prop="name" label="访问编号" align="center">
                    </el-table-column>
                    <el-table-column prop="state" label="用户名称" align="center">
                    </el-table-column>
                    <el-table-column prop="state" label="地址" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="登录地点" align="center">
                    </el-table-column>
                    <el-table-column label="操作系统" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="浏览器" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="登录状态" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.activationLock === '1'">成功</el-tag>
                            <el-tag type="danger" v-if="scope.row.activationLock === '0'">失败</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="描述" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="访问时间" align="center">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            formInline: {},
            headerRowStyle2: {
                'backgroundColor': '#f8f8f9',
                'color': 'black'
            },
            tableData: [
                {
                    date: 1,
                    state: '0',
                    role: '0',
                    eliminatedStatus: '1',
                    activationLock: '1',
                    deviceStatus: '1',
                    serverStatus: '1',
                    abmStatus: '1'
                },
                {
                    date: 2,
                    state: '1',
                    role: '1',
                    eliminatedStatus: '1',
                    activationLock: '1',
                    deviceStatus: '1',
                    serverStatus: '1',
                    abmStatus: '1'
                }
            ]
        }
    },
    methods: {

    },
    // 使用
    mounted() {
        this.$nextTick(() => {
        });
    },
}
</script>
<style scoped>
.platformContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header_card {
    margin-bottom: 20px;
}

::v-deep .el-form-item {
    margin-bottom: 0 !important;
}

.content {
    padding: .25rem;
}

::v-deep .el-descriptions__title {
    margin-right: .25rem;
}

.icon {
    margin-right: .125rem;
}

::v-deep .el-date-editor .el-range-separator {
    width: 7% !important;
}

.refresh {
    width: .625rem;
    font-size: .2125rem !important;
}
.refresh:hover{
    background-color: #ebf1ff;
}
::v-deep .refresh>.el-icon-refresh:before {
    font-size: .225rem !important;
}
</style>